<template>
  <div>

    <a-card :bordered="false">
      <div class="centeet">
        <div class="left" v-show="isAss">
          <div class="select">
            <a-radio-group :default-value="0" v-model="standardIndex" button-style="solid" @change="standardChange()">
              <a-radio-button value="A01A02">
                ISO
              </a-radio-button>
              <a-radio-button value="A01A01">
                GHG
              </a-radio-button>
            </a-radio-group>
          </div>
          <a-tree
              @select="onSelect"
              :treeData="treeDate"
              :selectedKeys="selectedKeys"

          >
            <span slot="title" slot-scope="{ title }" :title="title">
              {{ellipsis(title)}}
            </span>
          </a-tree>
          <!-- 展开 -->
          <div class="sizeStyle m_hoverCP" @click="onSizeLeft(false)">
            <img src="@/assets/carbon/img4.png" alt=""/>
          </div>
        </div>
        <div class="right">
          <div class="top">
            <div class="table-page-search-wrapper">
              <a-form layout="inline" @keyup.enter.native="getData(1)">
                <a-row :gutter="24">
                  <a-col :span="6">
                    <a-form-model-item :label="$t('message.facilities_activities')" prop="type">
                      <j-dict-select-tag style="width: 100%" v-model="form.activitieId" :dictCode="'cy_org_activitie,name,id,del_flag = 0'" :placeholder="$t('message.Please_select')"/>
                    </a-form-model-item>
                  </a-col>
                  <a-col :md="6" :sm="8">
                    <a-form-item :label="$t('message.Emission_source')+':'">
                      <a-input v-model="form.name" :placeholder="$t('message.Please_enter')" allowClear></a-input>
                    </a-form-item>
                  </a-col>
                  <span style="float: right; overflow: hidden" class="table-page-search-submitButtons">
              <a-col :md="6" :sm="24">
                <a-button type="primary" @click="getData(1)">{{ $t('message.Search') }}</a-button>
                <a-button style="margin-left: 8px" @click="searchReset">{{ $t('message.Reset') }}</a-button>
              </a-col>
            </span>
                </a-row>
              </a-form>
            </div>
          </div>

          <div class="tables">
            <a-button type="primary" @click="handleAdd" class="m_mb24" icon="plus">
              {{ $t('message.New_emission_source') }}
            </a-button>
            <a-table size="middle" :columns="columns" :data-source="dataSource" bordered @change="onchange"
                     :pagination="pagination">
              <template slot="carbonMolecule" slot-scope="text, record, index">
                <div class="editable-row-operations">
                  {{ record.carbonMolecule }}/{{ record.carbonDenomintor }}
                </div>
              </template>
              <template slot="operation" slot-scope="text, record, index">
                <div class="editable-row-operations">
                  <a style="margin-right: 24px" @click="() => saveUpdate(record.id)">{{ $t('message.Edit') }}</a>
                  <a @click="() => saveDelte(record.id)">{{ $t('message.Delete') }}</a>
                </div>
              </template>
            </a-table>
          </div>
          <div class="sizeStyle1 m_hoverCP" @click="onSizeLeft(true)" v-if="!isAss">
            <img src="@/assets/carbon/img5.png" alt=""/>
          </div>
        </div>
        <!--添加的新增详情弹框 -->
        <basicDrawer
            v-if="basicDrawerVisible"
            addUrl="/orgCarbonEmissionSource/addSystemFromUser"
            editUrl="/orgCarbonEmissionSource/editFromUser"
            :basicDrawerVisible="basicDrawerVisible"
            :basicDrawerString="basicDrawerString"
            :basicDrawerList="basicDrawerList"
            @onCloseBasicDrawerVisible="onCloseBasicDrawerVisible"
        />
      </div>
    </a-card>
  </div>
</template>
<script>
import basicDrawer from '@comp/common/basicDrawer.vue'
import { getAction, postAction, deleteAction } from '@api/manage'
import { cloneObject } from '@/utils/util'
import * as utils from '@/utils/util'

export default {
  name: 'equipment',
  components: {
    basicDrawer,
  },
  data() {
    return {
      isAss: true,
      standardIndex:"A01A02",
      visible: false,
      basicDrawerVisible: false,
      treeDate:[],
      selectedKeys:[],
      columns: [
          {
        title: this.$t('message.Emission_source'),
        dataIndex: 'name',
        align: 'center',
      },{
        title: this.$t('message.facilities_activities'),
        dataIndex: 'activitieId_dictText',
        align: 'center',
      }, {
        title: this.$t('message.Emission_type'),
        dataIndex: 'type_dictText',
        align: 'center',
      }, {
        title: 'CO₂e' + this.$t('message.Emission_factor_value'),
        dataIndex: 'carbonData',
        align: 'center',
      }, {
        title: this.$t('message.Emission_factor_unit'),
        dataIndex: 'carbonMolecule',
        scopedSlots: { customRender: 'carbonMolecule' },
        align: 'center',
      }, {
        title: this.$t('message.Handle'),
        align: 'center',
        dataIndex: 'operation',
        scopedSlots: { customRender: 'operation' },
      }],
      form: {},
      pagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + this.$t('message.Total') + total + this.$t('message.Piece')
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      dataSource: [],
      basicDrawerList: {},
      basicDrawerString: '',
    }
  },
  created() {
    this.loadTreeRoot(this.standardIndex)
    this.getData(1)
  },
  methods: {
    //过长省略
    ellipsis(value) {
      return value.split(' ').map(v => v.length > 18 ? v.substr(0, 18) + '...' : v).join(' ')
    },
    standardChange(){
      this.form.standardGhgDetailIds = null
      this.form.standardIsoDetailIds = null
      this.loadTreeRoot(this.standardIndex)
      this.getData(1)
    },
    /**
     * 核算标准
     */
    loadTreeRoot(pcode) {
      getAction("/sys/category/loadTreeRoot", {
        pcode: pcode,
        async: false,
      }).then((res) => {
        if (res.success) {
          this.treeDate = res.result;
        }
      });
    },
    //缩放
    onSizeLeft(value) {
      this.isAss = value
    },
    /**
     * 删除
     */
    saveDelte(id) {
      getAction('/orgCarbonEmissionSource/deleteById', { id: id }).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.getData(1)
        }
      })
    },
    /**
     * 编辑设备
     */
    saveUpdate(value) {
      console.log(value)
      getAction('/orgCarbonEmissionSource/getDetail', { id: value }).then((res) => {
        if (res.success) {
          this.basicDrawerList = res.result
          this.basicDrawerString = this.$t('message.edit_facilities_activities')
          this.basicDrawerVisible = true
        }
      })
    },
    onCloseBasicDrawerVisible() {
      this.basicDrawerVisible = false
      this.getData(1)
    },
    /**
     * 设施-活动管理-用户列表
     */
    getData(page) {
      if (page === 1) {
        this.pagination.current = 1
      }
      let reqData = cloneObject(this.form)
      reqData.pageNo = this.pagination.current
      reqData.pageSize = this.pagination.pageSize
      getAction('/orgCarbonEmissionSource/userPageList', reqData).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records || []
          this.pagination.total = res.result.total
          this.visible = true
        }
      })
    },
    searchReset() {
      this.selectedKeys = []
      this.form = {}
      this.getData(1)
    },
    //分页
    onchange(e) {
      this.pagination = e
      this.getData()
    },
    //打开抽屉
    handleAdd() {
      this.basicDrawerString = this.$t('message.New_emission_source')
      this.basicDrawerList = {}
      this.basicDrawerVisible = true
    },
    //关闭
    onClose() {
      this.visible = false
    },
    onSelect(selectedKeys, e) {
      this.selectedKeys = selectedKeys
      let standardDetailIds = ""

      if (e.selectedNodes[0].data.props.dataRef.leaf){
        standardDetailIds = selectedKeys[0]
      }else {
        standardDetailIds = e.selectedNodes[0].data.props.dataRef.children.map(item => item.key).join(',');
      }
      if (this.standardIndex == 'A01A01'){
        this.form.standardGhgDetailIds = standardDetailIds
      }else {
        this.form.standardIsoDetailIds = standardDetailIds
      }
      this.getData(1)
    },
  },
}
</script>
<style lang="less" scoped>
.centeet {
  display: flex;
  padding: 24px;
}

.color1 {
  color: #888888;
}

.inpts {
  width: 80px !important;
}

.tianjia {
  width: 380px;
  height: 156px;
  background: #f8f8f8;
  border-radius: 3px 3px 3px 3px;
  border: 1px solid #d9d9d9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .color {
    color: #888888;
  }

  .leftShoudong {
    background: #fff !important;
    border-color: #148958 !important;
    color: #148958 !important;
  }

  .marRight {
    margin-left: 16px;
  }
}

.tables {
  padding: 24px;
  background: #ffffff;
  border-radius: 3px 3px 3px 3px;
  border: 1px solid #eeeeee;
  margin-top: 24px;
}

.top {
  background: #ffffff;
  border-radius: 3px 3px 3px 3px;
  padding: 24px 24px 0;
}

.left {
  background: #fff;
  position: relative;
  padding: 29px 0px;
  border-right: 1px solid #e7e7e7;
  width: 20%;
  .select {
    margin-bottom: 24px;
    .ant-radio-button-wrapper {
      margin: 10px 20px;
      border-radius: 0;
    }
  }
}

.right {
  background: #fff;
  position: relative;
  flex: 1;
}
.sizeStyle {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: -16px;
  width: 16px;
  height: 46px;
  background: #ffffff;
  border-radius: 0px 5px 5px 0px;
  border: 1px solid #e7e7e7;
  z-index: 9;
  img {
    width: 16px;
    height: 16px;
  }
}
.sizeStyle1 {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 0px;
  width: 16px;
  height: 46px;
  background: #ffffff;
  border-radius: 0px 5px 5px 0px;
  border: 1px solid #e7e7e7;
  z-index: 9;
  img {
    width: 16px;
    height: 16px;
  }
}
.ant-tree {
  height: 600px;
}
</style>
